<!-- 统计页面 图表页面 -->
<!-- https://blog.csdn.net/qq_41954585/article/details/122585512 --><!-- 圆形图设置 -->
<template>
  <div
    style="display: flex;justify-content:center;">
   <!-- 左边整个大的 -->
   <div style="width: 70%; height: 760px;  margin-top: 15px;" >
        <!-- 最上面那排 -->
      <div style=" border: 1px solid rgb(189, 189, 189);width: 98%; height: 70px;border-radius: 15px;margin-top: 15px; margin-left: 20px;">
        <div style="width: 100%;display: flex;justify-content:center;margin-left:-2%;margin-top: -7px;">
          <p class="headtext">待办审批事项: <span style="color:rgb(0,153,255);font-size: 30px;">111</span></p>
          <p class="headtext">处理中审批事项: <span style="color:rgb(51,204,153);font-size: 30px;">222</span></p>
          <p class="headtext">已处理审批事项: <span style="color:rgb(255,51,0);font-size: 30px;">333</span> </p>
          <p class="headtext">已完结审批事项: <span style="color:rgb(255,51,0);font-size: 30px;">444</span></p>
        </div>
      </div>
      <!-- 中间一排 -->
      <div style="display: flex;justify-content:space-between;">
        <div style="width: 49%;height: 250px;border: 1px solid rgb(189, 189, 189);margin-top: 15px;border-radius: 15px;margin-left: 20px;" >
          <div style="display:flex;justify-content:space-between;margin-left: 20px;" >
            <p>审批事项数统计图</p>
            <select
              name="" id="" style=" margin-right: 30px;width: 10%;height: 25px;margin-top: 15px; ">
              <option value="">周</option>
              <option value="">月</option>
            </select>
          </div>
          <div ref="main" id="myChart" style="width: 90%;height: 180px;margin-top: 20px; margin-left: 20px;"></div>
        </div>
        <div style="width: 49%;height: 150px;border: 1px solid rgb(189, 189, 189);margin-left: 20px;margin-top: 15px;border-radius: 15px;">
           <p style="margin-left: 20px">审批事项热门关键字:</p>
           <div style="margin-left: 20px">热门热门热门热门热门热门热门热门热门热门热门热门热门热门</div>
        </div>
      </div>
      <!-- 下面一排 -->
      <div style="display: flex;justify-content: space-between;">
        <div style="width: 49%;height: 390px;border: 1px solid rgb(189, 189, 189);margin-top: 15px;border-radius: 15px;margin-left: 20px;">
            <div style="display: flex;justify-content: space-between;margin-left: 20px;" >
            <p>各部门审批统计图</p>
            <select name="" id="" style=" margin-right: 30px;width: 10%;height: 25px;margin-top: 15px; ">
              <option value="">周</option>
              <option value="">月</option>
            </select>
            </div>
            <div ref="main2" id="myChart" style="width: 90%;height: 330px;margin-top: 20px; margin-left: 20px "></div>
        </div>
        <div style="width: 49%;height: 490px;border: 1px solid rgb(189, 189, 189);margin-top: -85px;border-radius: 15px;margin-left: 20px;">
            <div style="display: flex;justify-content: space-between;margin-left: 20px;" >
            <p>各行业企业审批汇总</p>
            <select
              name="" id="" style=" margin-right: 30px;width: 10%;height: 25px;margin-top: 15px; ">
              <option value="">周</option>
              <option value="">月</option>
            </select>
            </div>
            <div ref="main3" id="myChart" style="width: 90%;height: 450px; margin-left: 20px "></div>
        </div>
      </div>
    </div>
    <!-- 右边整个小的 -->
    <div style="width: 28%;height: 760px;margin-top: 15px;">
     <div>
        <!-- 下拉框 -->
        <div style="margin-left: 20px;border: 1px solid rgb(189, 189, 189);border-radius: 15px;width: 90%;height: 70px;margin-top: 15px;">
            <select name="" id="" style="width:90%;height: 40px;margin-top: 15px;margin-left: 5%;">
                <option value="">所有部门</option>
                <option value="">工商部门</option>
                <option value="">税务部门</option>
                <option value="">人事部门</option>
                <option value="">环保部门</option>
                <option value="">社保部门</option>
                <option value="">土地管理部门</option>
                <option value="">行政许可部门</option>
            </select>
        </div>
     </div>
     <div>
        <!-- 工作效果统计图 -->
        <div style="width: 90%;height: 150px;border: 1px solid rgb(189, 189, 189);margin-top: 15px;border-radius: 15px;margin-left: 20px;">
            <!-- 所有部门下拉框 -->
          <div style="display: flex;justify-content: space-between;margin-left: 20px;" >
            <p>工作效果统计图</p>
            <select name="" id="" style=" margin-right: 30px;width: 15%;height: 25px;margin-top: 15px; ">
              <option value="">本周</option>
              <option value="">本月</option>
            </select>
          </div>
            <!-- 第一个圆饼统计图 -->
            <div style="display:flex;height:110px;margin-top:-20px">
                <div style="width:48%;">
                    <div ref="main4"  style="height: 120px;"></div>
                </div>
                <div style="width:48%">
                    <div ref="main5"  style="height: 120px;"></div>
                </div>
            </div>
        </div>
                <!-- 审批事项占比统计图 -->
        <div style="width: 90%;height: 230px;border: 1px solid rgb(189, 189, 189);margin-top: 15px;border-radius: 15px;margin-left: 20px;">
            <!-- 所有部门下拉框 -->
          <div style="display: flex;justify-content: space-between;margin-left: 20px;" >
            <p>审批事项占比统计图</p>
            <select name="" id="" style=" margin-right: 30px;width: 15%;height: 25px;margin-top: 15px; ">
              <option value="">本周</option>
              <option value="">本月</option>
            </select>
          </div>
            <div>
                <div>
                    <div ref="main6"  style="width:;height: 190px;"></div>
                </div>
            </div>
        </div>
        <div style="width: 90%;height: 238px;border: 1px solid rgb(189, 189, 189);margin-top: 20px;border-radius: 15px;margin-left: 20px;">
          <div style="display: flex;justify-content: space-between;margin-left: 20px;" >
            <p>评价统计图</p>
            <select name="" id="" style=" margin-right: 30px;width: 15%;height: 25px;margin-top: 15px; ">
              <option value="">本周</option>
              <option value="">本月</option>
            </select>
          </div>
            <div>
                <div>
                    <div ref="main7"  style="width: 100%;height: 190px;"></div>
                </div>
            </div>
        </div>
     </div>
    </div>
  </div>
</template>


<script lang="ts" setup>
import { ref, onMounted } from "vue";
//  按需引入 echarts
import * as echarts from "echarts";
const main = ref(); // 使用ref创建虚拟DOM引用，使用时用main.value
const main2 = ref(); // 横行柱状图
const main3 = ref(); // 叠层柱状图
const main4 = ref(); // 饼状图
const main5 = ref(); // 饼状图
const main6 = ref(); // 饼状图
const main7 = ref(); // 饼状图
onMounted(() => {
  init();
});
function init() {
  // 基于准备好的dom，初始化echarts实例
  let myChart = echarts.init(main.value);
  let myChart2 = echarts.init(main2.value);
  let myChart3 = echarts.init(main3.value);
  let myChart4= echarts.init(main4.value);
  let myChart5= echarts.init(main5.value);
  let myChart6= echarts.init(main6.value);
  let myChart7= echarts.init(main7.value);
  // 指定图表的配置项和数据
  let option = {
    xAxis: {
      type: "category",
      data: ["周一", "周二", "周三", "周四", "周五", "周六", "周日"],
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: [400, 230, 224, 218, 135, 147, 260],
        type: "line",
      },
    ],
  };
 let option2 = {
  title: {
    text: '各部门审批统计图'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type: 'category',
    data: ['工商部门', '税务部门', '土地管理部门', '行政许可部门', '人事部门', '环保部门','社保部门']
  },
  series: [
  /*   {
      name: '2011',
      type: 'bar',
      data: [18203, 23489, 29034, 104970, 131744, 630230]
    }, */
    {
    /*   name: '2012', */
      type: 'bar',
      data: [1, 2, 3, 4, 5, 6]
    }
  ]
};
let option3 = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      // Use axis to trigger tooltip
      type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
    }
  },
  legend: {},
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true
  },
  yAxis: {
    type: 'value'
  },
  xAxis: {
    type: 'category',
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  series: [
    {
      name: 'Direct',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [320, 302, 301, 334, 390, 330, 320]
    },
    {
      name: 'Mail Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: 'Affiliate Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [220, 182, 191, 234, 290, 330, 310]
    },
    {
      name: 'Video Ad',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [150, 212, 201, 154, 190, 330, 410]
    },
    {
      name: 'Search Engine',
      type: 'bar',
      stack: 'total',
      label: {
        show: true
      },
      emphasis: {
        focus: 'series'
      },
      data: [820, 832, 901, 934, 1290, 1330, 1320]
    }
  ]
};
 let option4  = {
  title: {
    text: '工作完成',
   /*  subtext: 'Fake Data', */
    left: '38%',
    top: '35%',
    textStyle: { // 主标题样式
              color: '#333',
              fontWeight: '200',
              fontSize: 14
            },
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    //orient: 'vertical',//垂直
    orient: 'horizontal',/* 横向 */
    /* left: 'left', */
    // top:'center',
    //right:"40",  /* 这个是调整图例的位置 */
    //top:'50',
    y:160,   /* 没懂？？？ */
    itemWidth:6,/* 这两个设置图列的大小 */
    itemHeight:6,
    itemGap:14,/* itemGap每个item的间隔 */
    textStyle:{
      color:"black",
      fontSizt:18,
      
    },
    show:false,//去除图例

  },
  series: [
    {
     /*  name: 'Access From', */
      type: 'pie',
      radius: ['70%','80%'],/* 设置圆形图大小 */
      center:['55%', '49%'],
      data: [
        { value: 1048,name:'非常满意'},
        { value: 735,name:'满意'},
        { value: 580,name:'不满意'},
        { value: 484, name:'非常不满意'},
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      itemStyle : {
          normal : {  /* 去除指示线文字 */
            label : {
              show : false
            },
          }
        },
      labelLine:{
        normal:{ /* 去除指示线 */
          position:'linner',
          show:false
        }
      }
    }
  ]
};
let option5  = {
  // graphic: [  //为环形图中间添加文字
  //                   {
  //                   type: "text",
  //                   left: "left",
  //                   top: "center",
  //                   x:100,
  //                   style: {
  //                       text: "按时办结",
  //                       textAlign: "center",
  //                       fill: "#32373C",
  //                       fontSize: 14,
  //                   },
  //                   },
  //               ],

  title: {
    text: '按时办结',
   /*  subtext: 'Fake Data', */
    left: '24%',
    top: '35%',
    textStyle: { // 主标题样式
              color: '#333',
              fontWeight: '200',
              fontSize: 14
            },
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    //orient: 'vertical',//垂直
    orient: 'horizontal',/* 横向 */
    /* left: 'left', */
    // top:'center',
    //right:"40",  /* 这个是调整图例的位置 */
    //top:'50',
    y:160,   /* 没懂？？？ */
    itemWidth:6,/* 这两个设置图列的大小 */
    itemHeight:6,
    itemGap:14,/* itemGap每个item的间隔 */
    textStyle:{
      color:"black",
      fontSizt:18,
      
    },
    show:false,//去除图例

  },
  series: [
    {
     /*  name: 'Access From', */
      type: 'pie',
      radius: ['70%','80%'],/* 设置圆形图大小 */
      center:['41%', '49%'],
      data: [
        { value: 1048,name:'非常满意'},
        { value: 735,name:'满意'},
        { value: 580,name:'不满意'},
        { value: 484, name:'非常不满意'},
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      itemStyle : {
          normal : {  /* 去除指示线文字 */
            label : {
              show : false
            },
          }
        },
      labelLine:{
        normal:{ /* 去除指示线 */
          position:'linner',
          show:false
        }
      }
    }
  ]
}; 
let option6  =  {
  title: {
    text: '',
   /*  subtext: 'Fake Data', */
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    //orient: 'vertical',//垂直
    orient: 'horizontal',/* 横向 */
    /* left: 'left', */
    // top:'center',
    right:"40",  /* 这个是调整图例的位置 */
    top:'50',
    y:130,   /* 没懂？？？ */
    width:140,//设置图例的宽高，可以让图例换行
    itemWidth:6,/* 这两个设置图列的大小 */
    itemHeight:6,
    itemGap:14,/* itemGap每个item的间隔 */
    textStyle:{
      color:"black",
      fontSizt:18,
    },

  },
  series: [
    {
     /*  name: 'Access From', */
      type: 'pie',
      radius: '82%',/* 设置圆形图大小 */
      center:['30%', '45%'],
      data: [
        { value: 1048,name:'已完成'},
        { value: 735,name:'待处理'},
        { value: 580,name:'已处理'},
        { value: 484, name:'处理中'},
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      itemStyle : {
          normal : {  /* 去除指示线文字 */
            label : {
              show : false
            },
          }
        },
      labelLine:{
        normal:{ /* 去除指示线 */
          position:'linner',
          show:false
        }
      }
    }
  ]
}
let option7  =  {
  title: {
    text: '',
   /*  subtext: 'Fake Data', */
    left: 'center'
  },
  tooltip: {
    trigger: 'item'
  },
  legend: {
    //orient: 'vertical',//垂直
    orient: 'horizontal',/* 横向 */
    /* left: 'left', */
    // top:'center',
    //right:"40",  /* 这个是调整图例的位置 */
    //top:'50',
    y:160,   /* 没懂？？？ */
    itemWidth:6,/* 这两个设置图列的大小 */
    itemHeight:6,
    itemGap:14,/* itemGap每个item的间隔 */
    textStyle:{
      color:"black",
      fontSizt:18,
    },

  },
  series: [
    {
     /*  name: 'Access From', */
      type: 'pie',
      radius: '82%',/* 设置圆形图大小 */
      center:['48%', '43%'],
      data: [
        { value: 1048,name:'非常满意'},
        { value: 735,name:'满意'},
        { value: 580,name:'不满意'},
        { value: 484, name:'非常不满意'},
      ],
      emphasis: {
        itemStyle: {
          shadowBlur: 10,
          shadowOffsetX: 0,
          shadowColor: 'rgba(0, 0, 0, 0.5)'
        }
      },
      itemStyle : {
          normal : {  /* 去除指示线文字 */
            label : {
              show : false
            },
          }
        },
      labelLine:{
        normal:{ /* 去除指示线 */
          position:'linner',
          show:false
        }
      }
    }
  ]
}
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  myChart2.setOption(option2);
  myChart3.setOption(option3);
  myChart4.setOption(option4);
  myChart5.setOption(option5);
  myChart6.setOption(option6);
  myChart7.setOption(option7);
}
</script>

<style scoped>
.headtext{
  width: 23%;
  font-size: 18px;
  font-weight: 700;
  color: rgb(51,51,51);
}
</style>
